<style lang="scss" >
    .back-icon{
        color: #363636;
        cursor: pointer;
    }
    .spec{
        position: relative;
    }
    .spec .close{
        border: solid 1px white;
        border-radius: 50%;
        text-align: center;
        display: inline-block;
        height: 12px;
        width: 12px;
        font-size: 13px;
        line-height: 12.5px;
        position: absolute;
        top: 1px;
        right: 1px;
    }
    .table-input .el-input__inner {
        height: 27px;
    }
    .el-upload{
        float: left;
    }
    .el-upload-list{
        float: left;
        margin-left: 10px;
    }
    .el-upload-list__item{
        margin-top: 0px;
    }
    .el-upload-list__item:first-child{
        margin-top: 0px;
    }
</style>
<template>
    <section >
        <div class="el-card__header" >
            <i @click="back" class="el-icon-arrow-left back-icon">返回</i>
        </div>
        <div class="el-card__body" >
            <el-row>
                <el-col :span="22"  v-loading="listLoading" >
                    <el-button v-for="spec in specData" class="spec" type="primary" @click="deleteSpec(spec)" >
                        <span v-text="spec.name" ></span>
                        <span class="close" >×</span>
                    </el-button>
                </el-col>
                <el-col :span="2" >
                    <el-button type="primary"  @click="addSpec" >设置规格</el-button>
                </el-col>
            </el-row>
            <el-table style="margin-top: 25px;" :data="specValueData" v-loading="listLoading" >
                <el-table-column  prop="specStr" label="规格" ></el-table-column>
                <el-table-column prop="valueStr" label="规格值" ></el-table-column>
                <el-table-column label="价格" prop="price"  width="144" >
                    <template slot-scope="scope">
                        <el-input class="table-input" type="text" v-model="scope.row.price" ></el-input>
                    </template>
                </el-table-column>
                <el-table-column  label="库存" prop="stock" width="144" >
                    <template slot-scope="scope" >
                        <el-input class="table-input" v-model="scope.row.stock" ></el-input>
                    </template>
                </el-table-column>
            </el-table>
            <el-row style="margin-top: 25px;" >
                <el-col :span="2" >
                    <el-button type="success"  @click="updateValues" >保存</el-button>
                </el-col>
            </el-row>
        </div>

        <el-dialog title="新增规格"  v-model="dialogVisible" :close-on-click-modal="false" >
            <el-collapse  >
                <el-collapse-item  v-for="item in dataList"  :title="item.name" :name="item.id" >
                    <el-row v-for="val in item.values" >
                        <el-col :span="6" >
                            <el-checkbox v-model="val.checked" ></el-checkbox>
                        </el-col>
                        <el-col :span="12" >
                            <span v-text="val.value" ></span>
                        </el-col>
                        <el-col :span="6" >
                            <el-upload
                                action="/admin/specification/upload"
                                list-type="text"
                                :multiple="false"
                                :limit="1"
                                :on-success="afterUpload"
                                :data="{specValId:val.id}"
                            ><i class="el-icon-upload" ></i>
                            </el-upload>
                        </el-col>
                    </el-row>
                </el-collapse-item>
            </el-collapse>
            <el-row style="margin-top: 25px" >
                <el-button type="primary" @click="submit" >提交</el-button>
            </el-row>
        </el-dialog>

    </section>
</template>

<script>
    import {getGoodsSpec, getSpecTree, saveGoodsSpecData, updateGoodsSpecData} from "../../api/api";

    export default {
        name: "Spec",
        data(){
            return{
                listLoading:false,
                productId:0,
                dataList:[],
                specData:[],
                specValueData:[],
                dialogVisible:false,
                images:[]
            }
        },
        mounted(){
            let opt = this.$route.query;
            this.productId = opt.id;
            this.loadData()
        },
        methods:{
            loadData(){
                let _this = this;
                getGoodsSpec({
                    id:_this.productId
                }).then(res=>{
                    let data = res.data;
                    if(data.code == 200){
                        _this.specData  = data.data.baseInfo;
                        _this.specValueData = data.data.currSpecs;
                        _this.listLoading = false;
                    }
                }).catch(err=>{
                    _this.$router.push({
                        path:'/login',
                    })
                })
            },
            addSpec(){
                this.dialogVisible = true
                let _this = this;
                getSpecTree().then(res=>{
                    let data = res.data;
                    if(data.code == 200){
                        _this.dataList = data.data
                    }
                })
            },
            prepareImage(id){
                for(let i = 0;i<this.images.length;i++){
                    if(this.images[i].specValId == id){
                        return this.images[i].url;
                    }
                }
            },
            resetSubmitData(dataList){
                let dataArr = []
                for(let i = 0;i<dataList.length;i++){
                    for(let j=0;j<dataList[i].values.length;j++){
                        let val = dataList[i].values[j];
                        if(val.checked){
                            dataArr.push({
                                specId:val.specId,
                                id:val.id,
                                url:this.prepareImage(val.id)
                            })
                        }
                    }
                }
                return dataArr;
            },
            resetDeleteData(spec){
                let dataArr = [];
                for(let i=0;i<this.specData.length;i++){
                    if(this.specData[i].id != spec.id){
                        for(let j = 0;j<this.specData[i].values.length;j++){
                            let val = this.specData[i].values[j];
                            dataArr.push({
                                specId:val.specId,
                                id:val.id,
                                url:val.url
                            })
                        }
                    }
                }
                return dataArr;
            },
            submitData(data,callback){
                this.listLoading = true;
                let tree = {values:data,productId:this.productId}
                saveGoodsSpecData(tree).then(res=>{
                    let code = res.code;
                    if(code == 200){
                        callback(res.data)
                    }
                })
            },
            submit(){
                this.dialogVisible = false;
                let data = this.resetSubmitData(this.dataList)
                let _this = this;
                this.submitData(data,function (resp) {
                    _this.$message({
                       type:'success',
                       message:'保存成功'
                   })
                    _this.loadData();
               });
            },
            deleteSpec(spec){
                let data = this.resetDeleteData(spec);
                let _this = this;
                this.submitData(data,function (resp) {
                    _this.$message({
                        type:'success',
                        message:'删除成功'
                    })
                    _this.loadData();
                });
            },
            back(){
                this.$router.back()
            },
            afterUpload(res,file){
                let img = res.data;
                this.images.push({
                    specValId:img.specValId,
                    url:img.image.path,
                    type:2
                })
            },
            updateValues(){
                let _this = this;
                _this.listLoading = true;
                updateGoodsSpecData(this.specValueData).then(res=>{
                    if(res.code == 200){
                        _this.$message({
                            type:'success',
                            message:'更新成功'
                        })
                        _this.loadData();
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
